<template>
  <div style="border: solid 20px rgb(245, 247, 249)">
    <Button
      style="color: aliceblue; margin: 20px"
      icon="ivu-icon ivu-icon-md-add"
      type="primary"
      @click="modal = true"
      >新增</Button
    >
    <Table border :columns="columns" :data="banners">
      <template #name="{ row }">
        <strong>{{ row.name }}</strong>
      </template>
      <template #action="{ index }">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="show(index)"
          >修改</Button
        >
        <Button type="error" size="small" @click="remove(index)">删除</Button>
      </template>
    </Table>
  </div>
  <div>
    <Modal
      v-model="modal"
      title="新增管理员"
      :loading="loading"
      @on-ok="asyncOK(true)"
      class="inp1"
    >
      标题:<Input
        v-model="this.bannerss.content"
        placeholder="分类名称"
        style="width: 420px; margin: 10px"
      />
      排序:<Input
        v-model="this.bannerss.mode"
        placeholder="排序"
        style="width: 420px; margin: 10px"
      />
    </Modal>
    <Modal
      v-model="modals"
      title="新增管理员"
      :loading="loading"
      @on-ok="asyncOK2(true)"
      class="inp1"
    >
      标题:<Input
        v-model="this.bannerss.content"
        placeholder="分类名称"
        style="width: 420px; margin: 10px"
      />
      排序:<Input
        v-model="this.bannerss.mode"
        placeholder="排序"
        style="width: 420px; margin: 10px"
      />
    </Modal>
  </div>
</template>
  <script>
import { list, add, del, update } from "../../Api/notice.js";
export default {
  created() {
    this.qq();
  },
  data() {
    return {
      modals: false,
      modal: false,
      columns: [
        {
          title: "id",
          key: "_id",
        },
        {
          title: "标题",
          key: "content",
        },
        {
          title: "排序",
          key: "mode",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      banners: [],
      bannerss: {
        content: "",
        mode: "",
      },
    };
  },
  methods: {
    // 封装
    qq() {
      list().then((res) => {
        this.banners = res.data.data;
      });
    },
    asyncOK() {
      add({
        content: this.bannerss.content,
        mode: this.bannerss.mode,
      }).then((res) => {
        console.log(res);
      });
      this.qq();
    },
    remove(index) {
      console.log(this.banners[index]._id);
      del({ _id: this.banners[index]._id }).then((res) => {
        console.log(res);
      });
      this.banners.splice(index, 1);
    },
    show(index) {
      (this.modals = true),
        (this.bannerss._id = this.banners[index]._id),
        (this.bannerss.content = this.banners[index].content);
      this.bannerss.mode = this.banners[index].mode;
    },
    asyncOK2() {
      update({
        _id: this.bannerss._id,
        content: this.bannerss.content,
        mode: this.bannerss.mode,
      }).then((res) => {
        console.log(res);
      });
      this.qq()
    },
  },
};
</script>